<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" charset="utf-8" />
    <title>Article classification</title>
    <link rel="stylesheet" type="text/css" href="indexpage/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="articlepage/css/article.css"/>
    <link rel="Shortcut Icon" href="utils/img/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="utils/css/icon.css">
    <script src="utils/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="utils/js/request.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //show and side login box
        function login(){
            if(document.getElementById("box2").style.display!="block")
                document.getElementById("box2").style.display="block";
            else
                document.getElementById("box2").style.display="none";
        }
        //goto register page
        function jump(){
            window.location.href="/register";
        }
    </script>
</head>
<body>
<div id="vuemain" style="width: 100%">
    <!--    top navigation bar-->
    <div class="top">
        <div style="display:flex; flex:1; justify-content:flex-start;">
            <div style="width: 250px; height: 50px; display: flex; align-items: center; justify-content: center;">
                <!--logo-->
                <img src="indexpage/img/logo.png" style="width: 250px; height: 70px;"/>
            </div>
            <div class="topButton">
                <button type="button" class="login" onclick="location.href='/personal'">My articles</button>
            </div>
        </div>
        <div style="display:flex; flex:1; justify-content:flex-end;">
            <!-- search box-->
            <div class="topButton" style="display: flex; justify-content: center; align-items: center;">
                <form method="get" action="">
                    <input v-model="content" type="text" placeholder="Search" style="margin: 0; padding: 0; height: 25px;"/>
                    <button type="button" @click="doSearch" name="" style="margin: 0; padding: 0; height: 25px; width: 25px; border-radius: 20%; background-image: url(indexpage/img/search.jpg); background-size: contain; cursor: pointer;">.</button>
                </form>
            </div>
            <!--log in box-->
            <div id="box" class="topButton">
                <div id="box1" class="login" type="button" @click="jumpToIndex()">Log in</div>
                <div id="box2" >
                    <form method="post" action="/login">
                        <h6 class="logtext" style="top:20px;">User name</h6>
                        <input class="input" style="top:50px;" name="username"/>
                        <h6 class="logtext" style="top:90px;">Password</h6>
                        <input class="input" style="top:120px;"  name="password">
                        <button type="submit" style="position: absolute; left: 30px; top: 160px; background-color:#000000; color: #FFFFFF; font-size: medium;">log in</button>
                    </form>
                </div>
            </div>
            <div class="topButton">
                <button type="button" class="login" onclick="jump()">Register</button>
            </div>
        </div>
    </div>
    <div id="main" style="padding: 0">
        <div class="boxborder" style="flex: 1; height: 950px; margin: 20px; background-color: #eefaff; padding: 20px;">
            <div class="classinfo"><h2>Article classification</h2> </div>
            <div class="side_box" style="width:350px;">
                <!--left categories - paper types-->
                <ul>
                    <li v-for="item in options" :id="item.id" :class="{leftchecked:item.id==nowId}"
                        @click="changeOptions(item.id)" style="list-style-type: none;">
                        <a class="active" style="position: relative; display: flex; align-items: center;">
                            <span class="icon iconfont" :class="[item.icon,{leftchecked:item.id==nowId}]" style="font-size: 25px;color: #93999f; padding: 2px 2px 0 0;"></span>
                            <span style="line-height: 30px;">{{item.text}}</span>
                            <div style="width: 0px; border-width: 24px 0px 24px 16px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(255, 255, 255) rgba(255, 255, 255, 0); position: absolute; right: 0px; top: 0px;"></div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="boxborder" style="flex: 2; height: 950px; margin: 20px; background-color: #eefaff; padding: 20px; margin-left: 0;">
            <div class="side_box">
                <div class="right_one">
                    <!-- view paper list -->
                    <div class="whole-paper-list" v-if="rightOneid=='sent'" style="overflow-y: scroll;">

                        <div class="paper_list" v-for="paper in nowPapers">
                            <div class="paper_info">
                                <a>
                                    <span style="font-size: 20px;font-weight: 800;color: #000000;">{{paper.title}}</span><br /><br />
                                    <span style="font-size: 16px;color: #14191E;">{{paper.author}}</span><br /><br />
                                    <span style="font-size: 16px;color: #14191E;">{{paper.abstracts}}</span>
                                </a>
                            </div>
                            <div class="content_button">
                                <a class="side_button" @click="showAddBox(paper.address,paper.id)">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    pop up box-->
    <div style="width: 100%;height: 100vh;position:fixed;top: 0;left: 0;z-index: 3000;background-color: rgba(0, 0, 0, 0.8); overflow-y: scroll;" v-show="addBox">
        <div style="width: 100%;height: 100%;position: relative;">
            <!-- close x -->
            <a class="icon iconfont icon-cha" style="position: absolute;top: 30px;right: 30px;font-size: 30px;color: rgb(255, 255, 255);" @click="showAddBox(false)"></a>
            <!-- Paper info-->
            <div class="general_info" style="width: 80%; margin: 0 auto;background-color: white;margin-bottom: 20px;margin-top: 20px;border-radius: 6px">
                <div class="general_info1">
                    <h2>{{currentPaper.title}}</h2>
                    <span style="font-weight: 350;font-size: 18px;">Author: {{currentPaper.author}}</span><br />
                    <span style="font-weight: 350;font-size: 18px;">University: {{currentPaper.type}}</span>
                </div>
                <div class="general_info2" style="margin: 0 120px;text-align: justify;">
                    <h4 style="display: inline;">Abstract: {{currentPaper.abstracts}}</h4>
                    <span></span><br />
                    <h4>Key words: {{currentPaper.keyword}}</h4>
                    <span></span><br />
                    <div style="background-color: white;_height: 200px;min-height:200px;text-align: justify;padding: 20px">
                        <h4>Comments: </h4>
                        <ul style="list-style: none;" v-for="com in currentPaper.comments">
                            <li><span style="font-weight: bold">Contents: </span>{{com.content}} </li>
                            <li style="margin-bottom: 13px;"><span style="font-weight: bold">Reviewer: </span>{{com.reviewer}} <span style="font-weight: bold">&nbsp&nbsp&nbsp&nbsp Reviewed time: </span>{{com.date}} <span style="font-weight: bold">&nbsp&nbsp&nbsp&nbsp State: </span>{{com.ok}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="pdfcon" style="width: 80%;height: 100vh;border: 2px solid #000000;margin-top:10px; margin-bottom: 20px; padding: 0;margin:0 auto;">
            </div>
            <!-- pop up box end-->
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var main = new Vue({
        el: "#vuemain",
        data: {
            count: 22222,
            choice:[],
            options:[
                {text:'All', id:'1',icon:"icon-caidanlan-shengchan-shengchandan"},
                {text:'Artificial intelligence', id:'2',icon:"icon-caidanlan-kehu-kehuguanli"},
                {text:'Big data', id:'3',icon:"icon-caidanlan-hetong-hetongdingdan"},
                {text:'Computer security', id:'4',icon:"icon-caidanlan-caigou-gongyingshangguanli"},
                {text:'Cloud computing', id:'5',icon:"icon-caidanlan-kefu-kefujilu"},
                {text:'Database', id:'6',icon:"icon-caidanlan-kefu-kefujilu"},
                {text:'Programming language', id:'7',icon:"icon-caidanlan-kefu-kefujilu"},
                {text:'Internet of things', id:'8',icon:"icon-caidanlan-kefu-kefujilu"}
            ],
            rightOnes:[
                {id:'sent'},
                {id:'wait'},
                {id:'draft'}
            ],
            rightSevens:[
                {id:'notFinished'},
                {id:'Finished'}
            ],
            nowId: 1,
            rightOneid:'sent',
            rightSevenid:'notFinished',
            content: '[[${session.searchcontent}]]',
            type: '[[${session.searchtype}]]',
            papers: [],
            specificPapers: [
                [],[],[],[],[],[],[]
            ],
            types: [
                "Artificial intelligence",
                "Big data",
                "Computer security",
                "Cloud computing",
                "Database",
                "Programing language",
                "Internet of things"
            ],
            nowPapers: [],
            searchContent: "",
            currentPaper: {
                abstracts: "",
                address: "",
                author: "",
                date: "",
                id: "",
                keyword: "",
                reviewer: "",
                state: "",
                title: "",
                type: "",
                university: '',
                comments: []
            },
            addBox: false
        },
        mounted(){
            //get all the published paper
            console.log(this.content, this.type);
            var returnValue = this.dataRequest("/getallpub", "post", [{name:"aa",value:"aa"}]);
            var i;
            if (returnValue.code) {
                this.papers = JSON.parse(returnValue.papers);
                for (i=0;i<this.papers.length;i++) {
                    for(var j=0;j<this.types.length;j++){
                        var sType = this.types[j];
                        //classify the paper according to type
                        if (this.papers[i].keyword.toLowerCase().includes(sType.toLowerCase())){
                            this.specificPapers[j].push(this.papers[i]);
                        }
                    }
                }
                //set type and show corresponding paper
                if(this.type=="" && this.content==""){
                    this.changeOptions(1);
                }else if(this.content!=""){
                    this.doSearch();
                }else{
                    switch (this.type){
                        case 'Artificial intelligence': this.nowId=2; break;
                        case 'Big data': this.nowId=3; break;
                        case 'Cloud computing': this.nowId=5; break;
                        case 'Computer security': this.nowId=4; break;
                        case 'Database': this.nowId=6; break;
                        case 'Programming language': this.nowId=7; break;
                        case 'Internet of things': this.nowId=8; break;
                    }
                    this.nowPapers = this.specificPapers[this.nowId - 2];
                }
            } else {
                window.location.href = "/";
            }
        },
        methods: {
            main: function(){
                console.log("hello");
            },
            jumpToIndex(){
                location.href="/";
            },
            changeOptions:function(index){//get corresponding paper
                this.nowId=index;
                if(index==1){
                    this.nowPapers = this.papers;
                }else {
                    this.nowPapers = this.specificPapers[index - 2];
                }
            },
            changeRightone:function(index){
                this.rightOneid=index;
            },
            changeRightseven:function(index){
                this.rightSevenid=index;
            },
            clicksub: function(index){
                this.subjects[index].judge=!this.subjects[index].judge;
            },
            dataRequest(url, method, data) {
                /*data package*/
                var fd = new FormData();
                for(var i=0;i<data.length;i++){
                    fd.append(data[i].name, data[i].value);
                }
                /*send data*/
                var xhr = new XMLHttpRequest();
                let ret = false;
                xhr.onreadystatechange= function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200 || xhr.status == 304) {
                            ret = JSON.parse(xhr.responseText);
                        }
                    }
                }
                xhr.open(method, url, false);
                xhr.send(fd);
                return ret;
            },
            //show detailed paper info
            showAddBox(add, id){
                if(add){
                    document.body.style.overflowY = "hidden";
                    document.getElementById("pdfcon").innerHTML = '<embed width="100%" height="100%" src="pdfs/'+ add +'.pdf"/>';
                    for(var i=0;i<this.papers.length;i++){
                        if(this.papers[i].id==id){
                            this.currentPaper = this.papers[i];
                            this.currentPaper.comments = JSON.parse(this.dataRequest('/getcomment', 'post', [{name:'id',value:this.papers[i].id}]).comments);
                            break;
                        }
                    }
                }else{
                    document.body.style.overflowY = "auto";
                }
                this.addBox = !this.addBox;
            },
            //show searched paper
            doSearch(){
                this.nowPapers = [];
                for (var i=0;i<this.papers.length;i++){
                    if (
                        this.papers[i].type.toLowerCase().includes(this.content.toLowerCase())
                        ||this.papers[i].title.toLowerCase().includes(this.content.toLowerCase())
                        ||this.papers[i].author.toLowerCase().includes(this.content.toLowerCase())
                        ||this.papers[i].abstracts.toLowerCase().includes(this.content.toLowerCase())
                    ){
                        this.nowPapers.push(this.papers[i]);
                    }
                }
            }
        }
    });
</script>
</html>
